<template>
<div>
<h2 class='name'>我是{{name+num}}
<slot name='xxx' >我是默认值，没有东西我会显示</slot>
</h2>

<!-- 插槽，你在使用组件时可以在组件标签里面再写标签，但是vue不知道放在哪里就不会显示，这时候就需要插槽来帮你定位 -->
<!-- 不写名字就是默认插槽，slot里面还可以写默认值 -->
<!-- 给组件一个slot属性，slot标签一个name属性，一样就会联系 -->
<slot>我是默认值，没有东西我会显示</slot>

<!-- 如果你的slot和template标签一起使用，可以解锁新用法，template标签上直接v-slot:要对应元素的slot值(不需要打引号) -->
<!-- 不用这个和template合作的也没事，反正没什么特别的 -->

<!-- 还有一种作用域插槽,叫作用域插槽，可以把组件的数据带到外部去配合slot使用 -->
</div>
</template>

<script>
export default {
    name:'Category',
    data(){
        return {
            name:'类别',
            msg:'我是放在组件里面的数据，我出现代表在在父组件中使用了'
        }
    },
    props:['num']
}
</script>


<style>
    .name{
        background: lightblue;
        height: 300px;
        width:200px;
        text-align:center
    }
</style>